<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="icon" href="favicon.ico" type="image/x-icon"/>
    <title>表具绑定</title>

    <!-- Bootstrap Core and vandor -->
    <link rel="stylesheet" th:href="@{https://www.jq22.com/jquery/bootstrap-4.2.1.css}">
    <link rel="stylesheet" th:src="@{../asset/css/dropify.min.css}">

    <!-- Core css -->
    <link rel="stylesheet" th:href="@{/assets/css/style.min.css}"/>
</head>
<body>
<div class="tab-pane" id="Transport-add">
    <div class="card">
        <!--增加用户-->
        <form class="card-body form-horizontal" method="post" >

            <!--            用户AccountId-->
            <input type="hidden" th:value="${basisposition.getAccountcustomer().accountid}" id="accountid"/>
            <div class="form-group row">
                <label class="col-md-3 col-form-label">家庭住址<span class="text-danger">*</span></label>
                <div class="col-md-7">
                    <input disabled = "disabled" class="form-control" type="text" th:value="${adress}">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-md-3 col-form-label">用户姓名<span class="text-danger">*</span></label>
                <div class="col-md-7">
                    <input type="text" class="form-control"  disabled="disabled" name="positionname" th:value="${basisposition.getCustomerbase().customername}">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-md-3 col-form-label">手机号码<span class="text-danger">*</span></label>
                <div class="col-md-7">
                    <input disabled="disabled" type="text" class="form-control" th:value="${basisposition.getCustomerbase().mobile}">
                </div>
            </div>

            <div class="form-group row">
                <label class="col-md-3 col-form-label">水表绑定<span class="text-danger">*</span></label>
                <div class="col-md-7">
                    <div th:switch="${flag}">
                        <input th:case="true" th:value="${meterbase.imei}" id="imei" disabled = "disabled"/>
                        <div th:case="false">
                            <input type="text" onclick="choose()" id="imei" placeholder="复制未开户设备的IMEI" />
                            <div id="meter"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-md-3 col-form-label"></label>
                <div class="col-md-7">
                    <button type="submit" class="btn btn-primary" onclick="bind()">绑定</button>
                    <button type="submit" class="btn btn-outline-secondary" onclick="cl()">Cancel</button>
                </div>
            </div>
        </form>
    </div>
</div>
</div>
</body>
<script>
    function choose() {
        var content = '';
        $.ajax({
            url:"/api/chooseMeter",

            success:function (res) {
                for (var i = 0 ; i < res.meterbases.length ;i++){
                    content += '<tr><td>' + (res.meterbases[i].imei)+ '</td><td>' + res.meterbases[i].usetypecode+ '</td></tr>';
                    console.log(content)
                }
                $("#meter").html(" <div class=\"table-responsive\">\n" +
                    "                                <table class=\"table table-hover table-striped table-vcenter mb-0 text-nowrap\">\n" +
                    "                                    <thead><tr><th>Imei</th><th>水表用途</th></tr></thead><tbody>" +content+ "</tbody></table></div>")
               $("#imei").removeAttr("onclick");
            }
        })
    }
    function bind(){
        var accountid = $("#accountid").val();
        var imei = $("#imei").val();
        $.ajax({
            async:true,
            url:"/accountMeter/insert",
            data:{
                accountid:accountid,
                imei:imei
            },
            success:function(res){
                console.log(res)
                if (res.status == "100"){
                    alert("绑定成功");
                }
                else{
                    alert("请检查Imei号是否存在或绑定")
                }
            },

        })
    }
    function cl() {
        parent.location.reload();
    }

</script>
<!-- Start Main project js, jQuery, Bootstrap -->
<script th:src="@{/assets/js/lib.vendor.bundle.js}"></script>

<!-- Start Plugin Js -->

<!-- Start project main js  and page js -->
<script th:src="@{/assets/js/core.js}"></script>
<script th:src="@{/assets/js/dropify.js}"></script>
</html>